<template>
  <div id="head">
    <Menu
      mode="horizontal"
      active-name="main"
      class="menu"
      theme="primary"
      @on-select="selectItem"
    >
      <span :class="{ active: 'main' == activeName }" id="main">
        <MenuItem name="main">
          <Icon type="ios-home" />
          主页
        </MenuItem>
      </span>
      <span :class="{ active: 'actical' == activeName }" id="actical">
        <MenuItem name="actical" ref="actical">
          <Icon type="ios-book" />
          文章
        </MenuItem>
      </span>
      <span :class="{ active: 'resource' == activeName }" id="resource">
        <MenuItem name="resource" ref="resource">
          <Icon type="ios-leaf" />
          资源分享
        </MenuItem>
      </span>
      <span :class="{ active: 'music' == activeName }" id="music">
        <MenuItem name="music" ref="music">
          <Icon type="ios-musical-notes" />
          音乐
        </MenuItem>
      </span>
      <span :class="{ active: 'message' == activeName }" id="message">
        <MenuItem name="message" ref="message">
          <Icon type="ios-book" />
          留言板
        </MenuItem>
      </span>
      <span class="head-right" :class="{ active: 'me' == activeName }" id="me">
        <Submenu name="me" class="hederSubMe">
          <template slot="title">
            <Avatar src="/images/头像.jpg">月</Avatar>
            {{ $author }}
          </template>
          <MenuItem name="me-info">个人信息</MenuItem>
          <MenuItem name="writeBlog">写博客</MenuItem>
        </Submenu>
      </span>
    </Menu>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: 'main',
      color: 'rgba(255, 255, 255, 0.5)'
    }
  },
  methods: {
    selectItem(name) {
      this.activeName = name
      this.$router.push({ name })
    },
    hover(e) {
      e.target.style.color = this.color
    },
    leave(e) {
      if (e.target.id != this.activeName) {
        e.target.style.color = ''
      }
    }
  },
  components: {}
}
</script>

<style lang="scss">
.head-right {
  float: right;
}

#head li {
  font-size: 17px !important;
  color: rgba(255, 255, 255, 0.5);
}
#head {
  height: 60px;
  width: 100%;
}
.active li {
  color: rgba(255, 255, 255, 1) !important;
}
.menu span li:hover {
  color: rgba(255, 255, 255, 1) !important;
}
.ivu-menu-primary {
  background-color: transparent !important;
}
.hederSubMe {
  .ivu-menu-item {
    color: #000 !important;
    &:hover {
      color: #000 !important;
    }
  }
}
</style>
